<template>


  <div class="login">


      <el-tabs v-model="tabName"    type="border-card" stretch="true">
        <h3 class="title">车辆租赁系统</h3>
        <el-tab-pane name="login" label="登录">
          <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
          <el-form-item prop="username">

            <el-input
                v-model="loginForm.username"
                type="text"
                size="large"
                auto-complete="off"
                placeholder="账号"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                v-model="loginForm.password"
                type="password"
                size="large"
                auto-complete="off"
                placeholder="密码"
                @keyup.enter="handleLogin"
            >
            </el-input>
          </el-form-item>


          <el-form-item style="width:100%;">
            <el-button
                size="large"
                type="primary"
                style="width:100%;"
                @click.prevent="handleLogin"
            >
              <span>登 录</span>

            </el-button>

          </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="register" label="注册">
            <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="login-form">
              <el-form-item prop="username">

                <el-input
                    v-model="registerForm.username"
                    type="text"
                    size="large"
                    auto-complete="off"
                    placeholder="账号"
                >
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                    v-model="registerForm.password"
                    type="password"
                    size="large"
                    auto-complete="off"
                    placeholder="密码"
                >
                </el-input>
              </el-form-item>


              <el-form-item style="width:100%;">
                <el-button
                    size="large"
                    type="primary"
                    style="width:100%;"
                    @click.prevent="handleRegister"
                >
                  <span>注册</span>

                </el-button>

              </el-form-item>
            </el-form>
        </el-tab-pane>

      </el-tabs>



    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © 2023-2099 <a href="localhost/cloud/disk.vip" target="_blank">longxinxu</a> 版权所有.</span>
    </div>

  </div>

</template>

<script setup>
import {inject, ref,} from 'vue'
import store from '@/store/index.js'
import {ElMessage} from "element-plus"
import axios from "../axios.js"
import {useRouter} from "vue-router"

const loginRef=ref(null)
const registerRef = ref(null)
const tabName = ref("login")

const router = useRouter()

// 使用 inject 获取刷新方法和数据
const refreshMethod = inject('refreshMethod');

const refresh = () => {
  // 调用刷新方法
  refreshMethod();
};

const loginForm=ref({
  username:"",
  password:""

})

const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }]
};


const handleLogin=()=>{
  loginRef.value.validate(async(valid)=>{
    if (valid){
            axios.post("/login",loginForm.value).then(res=>{
            if (res.code == 200){

              const token = res.data.token;
              const user = res.data.user;
              store.commit('SET_TOKEN',token)
              store.commit("SET_USER",user)
              refresh()
              router.replace("/")
            }else {
            }
        })

    }else {
      ElMessage.error("登录验证失败")
    }
  })
}


const registerForm=ref({
  username:"",
  password:""

})

const registerRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您要注册的用户名" }],
  password: [{ required: true, trigger: "blur", message: "请输入您要设置的密码" }]
};


const handleRegister = ()=>{
  registerRef.value.validate(async(valid)=>{
        if (valid){
          axios.post("/register",registerForm.value).then(res=>{
                if (res.code == 200){
                  ElMessage.success(res.msg)
                  tabName.value =  "login"
                }
          })
        }else {
          ElMessage.error("注册验证失败")
        }
  })
}



</script>

<style lang="scss" scoped>
a{
  color:white
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 697px;
  background-image: url("../assets/3.jpg");
  background-size: cover;


}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  align-items: center;
}
.el-input {
  height: 40px;
  width: 400px;
}
input {
  display: inline-block;
  height: 40px;
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

</style>
